<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>
    <link th:href="@{/css/bootstrap/3.3.6/bootstrap.css}" rel='stylesheet' type='text/css' />

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Custom Theme files -->
    <link th:href="@{/css/style.css}" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!--webfont-->
    <script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/login.js}"></script>
    <script th:src="@{/js/jquery.easydropdown.js}"></script>
    <!--Animation-->
    <script th:src="@{/js/wow.min.js}"></script>
    <link th:href="@{/css/animate.css}" rel='stylesheet' type='text/css' />
    <script>
        new WOW().init();
    </script>
</head>
<body>
<div class="header">
    <div class="col-sm-8 header-left">
        <div class="logo">
            <a th:href="@{/user/toIndex}"><img th:src="@{/images/hotel/logo.png}" alt=""/></a>
        </div>
        <div class="menu">
            <a class="toggleMenu" href="#"><img th:src="@{/images/hotel/nav.png}" alt="" /></a>
            <ul class="nav" id="nav">
                <li class="active"><a th:href="@{/user/toIndex}">主页</a></li>
                <li><a th:href="@{/user/toRooms}">房间</a></li>
                <li><a th:href="@{/room/searchRoom}">搜索</a></li>
                <li><a th:href="@{/user/toGallery}">酒店</a></li>
                <li><a th:href="@{/user/userCenter}">个人中心</a></li>
                <div class="clearfix"></div>
            </ul>
            <script type="text/javascript" th:src="@{/js/responsive-nav.js}"></script>
        </div>
        <!-- start search-->
        <div class="search-box">
            <div id="sb-search" class="sb-search">
                <form>
                    <input class="sb-search-input" placeholder="Enter your search term..." type="search" name="search" id="search">
                    <input class="sb-search-submit" type="submit" value="">
                    <span class="sb-icon-search"> </span>
                </form>
            </div>
        </div>
        <!----search-scripts---->
        <script th:src="@{/js/classie.js}"></script>
        <script th:src="@{/js/uisearch.js}"></script>
        <script>
            new UISearch( document.getElementById( 'sb-search' ) );
        </script>
        <!----//search-scripts---->
        <div class="clearfix"></div>
    </div>
    <div class="col-sm-4 header_right">
        <div id="loginContainer">
            <a href="#" id="loginButton"><img th:src="@{/images/hotel/login.png}">
                <span th:if="${session.person != null}" id="logins" th:value="${session.person}" th:text="${session.person.userName}"></span>
                <span th:if="${session.person == null}">登  录</span>
            </a>

            <div id="registBox">
                <a th:href="@{/pages/toRegist}" id="registButton">
                    <span th:if="${session.person == null}">注  册</span>
                    <span th:if="${session.person != null}" ></span>
                </a>
                <a th:href="@{/user/logout}" id="logoutButton">
                    <span th:if="${session.person != null}">退  出</span>
                    <span th:if="${session.person == null}" ></span>
                </a>
            </div>



            <div id="loginBox">
                <form th:action="@{/user/welcome}" id="loginForm" th:method="POST">
                    <fieldset id="body">
                        <fieldset>
                            <label for="name">用户名</label>
                            <input type="text" name="userName" id="name">
                        </fieldset>
                        <fieldset>
                            <label for="password">密码</label>
                            <input type="password" name="userPassword" id="password">
                        </fieldset>
                        <input type="submit" id="login" value="登录">
                        <label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住我</i></label>
                    </fieldset>
                    <span><a href="#">忘记您的密码了？</a></span>
                </form>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>
<div class="single">
    <div class="container">
        <div class="col-md-12 sing">
            <div class=" single-grid">
                <img class="img-responsive" th:src="@{'/myFile/'+${room.roomImg}}" />
                <div class="lone-line">

                    <h2 th:text="${room.roomType}"></h2>



                    <!--<h2 th:text="${rooms.size()}"></h2>-->
                    <div class="cal">
                        <ul>

                        </ul>
                    </div>
                    <!--  <p th:text="${rooms.get(0).}"></p>-->


                </div>
            </div>
            <div class=" single-profile">
                <h4> Related Posts</h4>
                <div class="single-left ">
                    <div class="col-md-2 post-top">
                        <img class="img-responsive " th:src="@{/images/s1.jpg}" alt="">
                        <h6>wifi</h6>
                        <p>免费WiFi</p>
                    </div>
                    <div class="col-md-2 post-top">
                        <img class="img-responsive " th:src="@{/images/s1.jpg}" alt="">
                        <h6>停车场</h6>
                        <p>入住提供免费停车场</p>
                    </div>
                    <div class="col-md-2 post-top">
                        <img class="img-responsive " th:src="@{/images/s2.jpg}" alt="">
                        <h6>早餐</h6>
                        <p>入住皆有自助早餐 </p>
                    </div>
                    <div class="col-md-2 post-top">
                        <img class="img-responsive " th:src="@{/images/s3.jpg}" alt="">
                        <h6>房间环境</h6>
                        <p>早上免费提供自助早餐，午餐晚餐需预定</p>
                    </div>
                    <div class="col-md-2 post-top">
                        <img class="img-responsive " th:src="@{/images/s4.jpg}" alt="">
                        <h6>酒店环境</h6>
                        <p></p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <h3 class="w3_room">日期选择</h3>
            <div class="form-group">
                <label>入住日期</label>

                <div class="input-group date">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input type="text" class="form-control pull-right" id="datepickerone">
                </div>
                <!-- /.input group -->
            </div>
            <div class="form-group">
                <label>退房日期</label>

                <div class="input-group date">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input type="text" class="form-control pull-right" id="datepickertwo">
                </div>
                <!-- /.input group -->
            </div>
            <div class="single-bottom">
                <!--(id=${room.roomId}-->
                <input id="roomId" type="hidden" th:value="${room.roomId}">
                <button  onclick="btnCount_Click()">预定</button>

            </div>
            <input type="hidden" th:value="${room.roomPrice}" id="current_roomPrice">

        </div>
        <div class="offering">
            <h2>What can Hotel Deluxe offer to you ?</h2>
            <h3>Ut wisi enim ad minim veniam, quis</h3>
            <ul class="icons wow fadeInUp" data-wow-delay="0.4s">
                <li><i class="icon1"> </i><span class="one"> </span></li>
                <li><i class="icon2"> </i><span class="two"> </span></li>
                <li><i class="icon3"> </i><span class="three"> </span></li>
                <li><i class="icon4"> </i><span class="four"> </span></li>
                <li><i class="icon5"> </i></li>
            </ul>
            <div class="real">
                <h4>Reality</h4>
                <div class="col-sm-6">
                    <ul class="service_grid">
                        <i class="s1"> </i>
                        <li class="desc1 wow fadeInRight" data-wow-delay="0.4s">
                            <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod maxim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum</p>
                        </li>
                        <div class="clearfix"> </div>
                    </ul>
                </div>
                <div class="col-sm-6">
                    <ul class="service_grid">
                        <i class="s2"> </i>
                        <li class="desc1 wow fadeInRight" data-wow-delay="0.4s">
                            <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod maxim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum</p>
                        </li>
                        <div class="clearfix"> </div>
                    </ul>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="footer">
    <div class="container">
        <div class="footer_top">
            <h3>Subscribe to our newsletter</h3>
            <form>
		<span>
			<i><img th:src="@{/images/hotel/mail.png}" alt=""></i>
		    <input type="text" value="Enter your email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter your email';}">
		    <label class="btn1 btn2 btn-2 btn-2g"> <input name="submit" type="submit" id="submit1" value="Subscribe"> </label>
		    <div class="clearfix"> </div>
		</span>
            </form>
        </div>
        <div class="footer_grids">
            <div class="footer-grid">
                <h4>Ipsum Quis</h4>
                <ul class="list1">
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="#">Mirum est</a></li>
                    <li><a href="#">Placerat facer</a></li>
                    <li><a href="#">Claritatem</a></li>
                    <li><a href="#">Sollemnes </a></li>
                </ul>
            </div>
            <div class="footer-grid">
                <h4>Quis Ipsum</h4>
                <ul class="list1">
                    <li><a href="#">Placerat facer</a></li>
                    <li><a href="#">Claritatem</a></li>
                    <li><a href="#">Sollemnes </a></li>
                    <li><a href="#">Claritas</a></li>
                    <li><a href="#">Mirum est</a></li>
                </ul>
            </div>
            <div class="footer-grid last_grid">
                <h4>Follow Us</h4>
                <ul class="footer_social wow fadeInLeft" data-wow-delay="0.4s">
                    <li><a href=""> <i class="fb"> </i> </a></li>
                    <li><a href=""><i class="tw"> </i> </a></li>
                    <li><a href=""><i class="google"> </i> </a></li>
                    <li><a href=""><i class="u_tube"> </i> </a></li>
                </ul>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
</div>
</body>
<script th:src="@{/js/jquery.min.js}"></script>

<script th:src="@{/js/jquery.validate.min.form.js}"></script>
<script th:src="@{/js/jquery.formtowizard.form.js}"></script>
<script th:src="@{/adminlte/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/adminlte/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js}"></script>

<!-- Select2 -->
<script th:src="@{/adminlte/bower_components/select2/dist/js/select2.full.min.js}"></script>
<!-- InputMask -->
<script th:src="@{/adminlte/plugins/input-mask/jquery.inputmask.js}"></script>
<!-- date-range-picker -->
<script th:src="@{/adminlte/bower_components/moment/min/moment.min.js}"></script>
<script th:src="@{/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.js}"></script>
<script>
    $('#datepickerone').datepicker({
        autoclose: true
    });
    $('#datepickertwo').datepicker({
        autoclose: true
    })

</script>
<script>
    $(function () {


        var $signupForm = $('#SignupForm');

        $signupForm.validate({errorElement: 'em'});

        $signupForm.formToWizard({
            submitButton: 'SaveAccount',
            nextBtnClass: 'btn btn-primary next',
            prevBtnClass: 'btn btn-default prev',
            buttonTag: 'button',
            validateBeforeNext: function (form, step) {
                var stepIsValid = true;
                var validator = form.validate();
                $(':input', step).each(function (index) {
                    var xy = validator.element(this);
                    stepIsValid = stepIsValid && (typeof xy == 'undefined' || xy);
                });
                return stepIsValid;
            }

        });
    });




</script>

<script th:inline="javascript" type="text/javascript">

    function btnCount_Click(){//date1:小日期   date2:大日期
        var val1 = $('#datepickerone').val();
        var val2 = $('#datepickertwo').val();
        var id = $("#roomId").val();
        //alert(DateDiff(val1,val2));
        var val3 = DateDiff(val1,val2);
        var roomPrice=$("#current_roomPrice").val();
        //alert("价格"+roomPrice+"天数"+val3)
        var params = {
            id: id,
            roomPrice:roomPrice,
            Day:val3,
        }
        $.ajax({
            url:'/room/book',
            data:params,
            dataType: 'json',
            type:"post",
            success: function (data) {
                window.location.href = '/room/toBookingForm?id=' + id;
            }
        });
    }
    function  DateDiff(sDate1,  sDate2){    //sDate1和sDate2是2002-12-18格式
        var  aDate,  oDate1,  oDate2,  iDays
        aDate  =  sDate1.split("-")
        oDate1  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])    //转换为12-18-2002格式
        aDate  =  sDate2.split("-")
        oDate2  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])
        iDays  =  parseInt(Math.abs(oDate1  -  oDate2)  /  1000  /  60  /  60  /24)    //把相差的毫秒数转换为天数
        return  iDays
    }


</script>

<script>
    $(function () {
        $('#loginButton').click(function () {
            var test = $('#logins').val();
            if(test!=null){
                $('#loginBox').remove();
            }
        })

    })
</script>
</html>